<template>
  <div>
    <!-- style="height:500px;width:500px;" -->
    <div id="map-box" ref="chartRef"></div>
  </div>
</template>

<script>
const { BMapGL } = window
export default {
  name: 'MapPage',
  components: {},
  data() {
    return {

    }
  },
  created() {},
  mounted() {
    var map = new BMapGL.Map('map-box')
    var point = new BMapGL.Point(103.941429, 30.712552)
    map.centerAndZoom(point, 15)
    // 创建小车图标
    var myIcon = new BMapGL.Icon('https://rzzt-1255651667.cos.ap-nanjing.myqcloud.com/car.png', new BMapGL.Size(52, 26))
    // 创建Marker标注，使用小车图标
    var pt = new BMapGL.Point(103.9696, 30.688829)
    var marker = new BMapGL.Marker(pt, {
      icon: myIcon
    })
    // 将标注添加到地图
    map.addOverlay(marker)

    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)

    var navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件
    map.addControl(navi3DCtrl)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
#map-box{
  height: 100vh;
}
</style>
